<template>
	<view class="warp" v-if="informations.male.bazi">
	<!-- 自定义导航栏 -->
	<!-- <uni-nav-bar
	background-color="#f2f2f2" color="black" :border="false" 
	:fixed="true" @clickLeft="left"  left-icon="left"  
	leftWidth="30rpx" title="合婚详情" rightWidth="10rpx"
	 :statusBar="true" 
	height="88rpx">
	 
	</uni-nav-bar> -->
		<view  v-if="!auditShow">
			<other></other>
		</view>
		<view class="boy_info" v-if="informations && auditShow">
			<view class="boy_title" >
				<view class="left">
					
				</view>
				<view class="title">
					男方信息
				</view>
			</view>
			<view class="id_info">
				<view class="name">
					<span class="title">男方姓名:</span><span style="color: #fcb4d9;font-weight: 550;">{{informations.male.name}}</span>
				</view>
				<view class="datetime">
					<span class="title">出生公历:</span><span>{{informations.male.gongli}}</span>
				</view>
				<view class="Zodiac">
					<span class="title">生肖属性:</span><span>{{informations.male_sx}}</span>
				</view>
				<view class="shu">
					<span class="title">您属于:</span> <span style="margin-right: 16rpx;">{{informations.minggong.male_fengshui}}</span>
				    <span class="title">命宫为:</span><span>{{informations.minggong.male_minggong}}</span>
				</view>
			</view>
			
			<view class="bazi_info" :class="{'boyactive':boyactive1}">
				<view class="tg_shishen">
					<view class="item title">
						十神
					</view>
					<view class="item" v-for="(item,index) in informations.male.tg_cg_god" :key="index">
						{{item}}
					</view>
				</view>
				<view class="bazi">
					<view class="tg_item">
						<view class="item title">
							天干
						</view>
						<view class="item" v-for="(item,index) in informations.male.bazi" :key="index">
							{{item.slice(0,1)}}
						</view>
					</view>
					<view class="dz_item">
						<view class="item title">
							地支
						</view>
						<view class="item" v-for="(item,index) in informations.male.bazi" :key="index">
							{{item.slice(1,2)}}
						</view>
					</view>
					<view class="dz_cg">
						<view class="item title">
							藏干
						</view>
						<view class="item" v-for="(item,index) in informations.male.dz_cg" :key="index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="dz_shishen">
					<view class="item title">
						十神
					</view>
					<view class="item" v-for="(item,index) in informations.male.dz_cg_god" :key="index">
						{{item}}
					</view>
				</view>
				<view class="wangshuai">
					<view class="item title">
						旺衰
					</view>
					<view class="item" v-for="(item,index) in informations.male.day_cs" :key="index">
						{{item}}
					</view>
				</view>
				<view class="nayin">
					<view class="item title">
						纳音
					</view>
					<view class="item" v-for="(item,index) in informations.male.na_yin" :key="index">
						{{item}}
					</view>
				</view>
				
		
		</view>
		<view class="isactive" v-if="!boyactive1">
			<view  class="isactive_button" @click="changefn">
				<view class="">
					点击展开更多信息
				</view>
				<uni-icons color="#00b300" type="down" size="20"></uni-icons>
			</view>
		</view>
		<view class="zhedie" @click="changefn" v-if="boyactive1">
			<view class="zhedie_button">
				<uni-icons color="#00b300" type="up" size="20"></uni-icons>
				<view class="">
					点击收起
				</view>
			</view>
		</view>
		</view>
		<view class="gir_info" v-if="informations && auditShow">
			<view class="gir_title">
				<view class="left">
					
				</view>
				<view class="title">
					女方信息
				</view>
			</view>
			<view class="id_info">
					<view class="name">
						<span class="title">女方姓名:</span><span style="color: #fcb4d9;font-weight: 550;">{{informations.female.name}}</span>
					</view>
					<view class="datetime">
						<span class="title">出生公历:</span><span>{{informations.female.gongli}}</span>
					</view>
					<view class="Zodiac">
						<span class="title">生肖属性:</span><span>{{informations.female_sx}}</span>
					</view>
					<view class="shu">
						<span class="title">您属于:</span> <span style="margin-right: 16rpx;">{{informations.minggong.female_fengshui}}</span>
					    <span class="title">命宫为:</span><span>{{informations.minggong.female_minggong}}</span>
					</view>
				</view>
				<view class="bazi_info" :class="{'boyactive':boyactive2}">
					<view class="tg_shishen">
						<view class="item title">
							十神
						</view>
						<view class="item" v-for="(item,index) in informations.female.tg_cg_god" :key="index">
							{{item}}
						</view>
					</view>
					<view class="bazi">
						<view class="tg_item">
							<view class="item title">
								天干
							</view>
							<view class="item" v-for="(item,index) in informations.female.bazi" :key="index">
								{{item.slice(0,1)}}
							</view>
						</view>
						<view class="dz_item">
							<view class="item title">
								地支
							</view>
							<view class="item" v-for="(item,index) in informations.female.bazi" :key="index">
								{{item.slice(1,2)}}
							</view>
						</view>
						<view class="dz_cg">
							<view class="item title">
								藏干
							</view>
							<view class="item" v-for="(item,index) in informations.female.dz_cg" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="dz_shishen">
						<view class="item title">
							十神
						</view>
						<view class="item" v-for="(item,index) in informations.female.dz_cg_god" :key="index">
							{{item}}
						</view>
					</view>
					<view class="wangshuai">
						<view class="item title">
							旺衰
						</view>
						<view class="item" v-for="(item,index) in informations.female.day_cs" :key="index">
							{{item}}
						</view>
					</view>
					<view class="nayin">
						<view class="item title">
							纳音
						</view>
						<view class="item" v-for="(item,index) in informations.female.na_yin" :key="index">
							{{item}}
						</view>
					</view>
					
			</view>
			<view class="isactive" v-if="!boyactive2">
				<view  class="isactive_button" @click="changefn2">
					<view class="">
						点击展开更多信息
					</view>
					<uni-icons color="#00b300" type="down" size="20"></uni-icons>
				</view>
			</view>
			<view class="zhedie" @click="changefn2" v-if="boyactive2">
				<view class="zhedie_button">
					<uni-icons color="#00b300" type="up" size="20"></uni-icons>
					<view class="">
						点击收起
					</view>
				</view>
			</view>
		</view>
	
     <!-- 合婚结果 -->
	 <view class="hehun" v-if="informations && auditShow">
	  <view class="title">
	  	合盘结果
	  </view>
	  <view class="allsore">
	  	<view class="sore">
	  		<span style="font-size: 40rpx;margin-right: 10rpx;">总分:</span>
			<span style="font-size: 42rpx;font-weight: 550;color: #fcb4d9;">{{informations.all_score}}</span>
	  	</view>
	  </view>
	  <view class="minggong">
	  	<view class="top_title">
	  		<view class="titleinfo">
	  		<view class="line">
	  			
	  		</view>
			<view class="text">
				命宫
			</view>
	  		</view>
			<view class="score">
				{{informations.minggong.score}}
			</view>
	  	</view>
		<view class="content">
			<view class="description">
				<span>说明:</span><span>{{informations.minggong.description}}</span>
			</view>
			<view class="detail">
				{{informations.minggong.detail_description}}
			</view>
		</view>
	  </view>
	  <view class="nianzhi">
	  	<view class="top_title">
	  		<view class="titleinfo">
	  			<view class="line">
	  				
	  			</view>
	  			<view class="text">
	  				年支同气
	  			</view>
	  		</view>
	  		<view class="score">
	  			{{informations.nianqitongzhi.score}}
	  		</view>
	  	</view>
	  	<view class="content">
	  		<view class="description">
	  			<span>说明:</span><span>{{informations.nianqitongzhi.description}}</span>
	  		</view>
	  		<view class="detail">
	  			{{informations.nianqitongzhi.detail_description}}
	  		</view>
	  	</view>
	  </view>
	  <view class="yueling">
	  	<view class="top_title">
	  		<view class="titleinfo">
	  			<view class="line">
	  				
	  			</view>
	  			<view class="text">
	  				月令合
	  			</view>
	  		</view>
	  		<view class="score">
	  			{{informations.yueling.score}}
	  		</view>
	  	</view>
	  	<view class="content">
	  		<view class="description">
	  			<span>说明:</span><span>{{informations.yueling.description}}</span>
	  		</view>
	  		<view class="detail">
	  			{{informations.yueling.detail_description}}
	  		</view>
	  	</view>
	  </view>
	  <view class="rigan">
	  	<view class="top_title">
	  		<view class="titleinfo">
	  			
				<view class="line">
					
				</view>
				<view class="text">
					日干相合
				</view>
	  		</view>
	  		<view class="score">
	  			{{informations.rigan.score}}
	  		</view>
	  	</view>
	  	<view class="content">
	  		<view class="description">
	  			<span>说明:</span><span>{{informations.rigan.description}}</span>
	  		</view>
	  		<view class="detail">
	  			{{informations.rigan.detail_description}}
	  		</view>
	  	</view>
	  </view>
	  <view class="tg_wuhe">
	  	<view class="top_title">
	  		<view class="titleinfo">
	  			
				<view class="line">
					
				</view>
				<view class="text">
					天干五合
				</view>
	  		</view>
	  		<view class="score">
	  			{{informations.tiangan.score}}
	  		</view>
	  	</view>
	  	<view class="content">
	  		<view class="description">
	  			<span>说明:</span><span>{{informations.tiangan.description}}</span>
	  		</view>
	  		<view class="detail">
	  			{{informations.tiangan.detail_description}}
	  		</view>
	  	</view>
	  </view>
	  <view class="zinv">
	  	<view class="top_title">
	  		<view class="titleinfo">
	  			
				<view class="line">
					
				</view>
				<view class="text">
					子女同步
				</view>
	  		</view>
	  		<view class="score">
	  			{{informations.zinv.score}}
	  		</view>
	  	</view>
	  	<view class="content">
	  		<view class="description">
	  			<span>说明:</span><span>{{informations.zinv.description}}</span>
	  		</view>
	  		<view class="detail">
	  			{{informations.zinv.detail_description}}
	  		</view>
	  	</view>
	  </view>
	 </view>
	</view>
</template>

<script>
import loginPopVue from '../../../components/loginPop/loginPop.vue';


	export default {
		data() {
			return {
				auditShow:true,
				objInfo:null,
				informations:{},
				boyactive1:false,
				boyactive2:false,
			};
		},
		onLoad(options) {
			this.getAudit()
			if ('syngobj' in options) {
			      let obj = JSON.parse(decodeURIComponent(options.syngobj));
				 
				 this.getinfo(this.objInfo)
				
			 }
		},
		methods:{
			changefn(){
				this.boyactive1=!this.boyactive1
			},
			changefn2(){
				this.boyactive2=!this.boyactive2
			},
			//获取微信审核开关
			getAudit(){
			    let param = {};
				param.url='v3/system/front/configuration/1'
				this.$request(param).then(res=>{
					this.auditShow=res.data.auditSwitch
					if(res.data.auditSwitch){
						console.log(res.data.auditSwitch);
						uni.setNavigationBarTitle({
							title:'合婚详情'
						})
					}
					
				})
			},
			getinfo(val){
				uni.request({
					url:"https://api.yuanfenju.com/index.php/v1/Bazi/hehun",
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method:'POST',
					data:val
				}).then(res=>{
					this.informations=res[1].data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	// padding: 16rpx;
	background-color: #f2f2f2;
}
.warp{
	padding: 0rpx 0rpx;
	font-size: 28rpx;
	
	.gir_info{
		margin-top: 30rpx;
	}
	
	.boy_info,.gir_info{
		background-color: #fff;
		padding: 16rpx;
		border-radius: 20rpx;
		margin-top: 10rpx;
		
		.gir_title,.boy_title{
			display: flex;
			align-items: center;
			 .left{
				 width: 10rpx;
				 height: 50rpx;
				 background-color: #fcb4d9;
				 border-radius: 4rpx;
				 margin-right: 10rpx;
			 }
			 .title{
				 font-size: 36rpx;
			 }
			// border-bottom: 4rpx solid #cecece;
			// color: #fcb4d9;
			// padding: 25rpx 30rpx;
			text-align: left;
			
			font-weight: 550;
			letter-spacing: 4rpx;
			// border-radius: 16rpx;
			margin-bottom: 20rpx;
		}
		
		
		
		.id_info{
			padding: 16rpx;
			// border: 4rpx solid #fcb4d9;
			border-radius: 10rpx;
			font-size: 32rpx;
			.name,.datetime,.Zodiac,.shu{
				padding: 10rpx 0;
				
				
				.title{
					font-weight: 550;
					margin-right: 16rpx;
				}
			}
			
		}
		
		.bazi_info{
			padding: 16rpx 0;
			overflow: hidden;
			max-height: 100rpx;
			transition: max-height 1s ease-out;
			.tg_shishen,.dz_cg,.dz_shishen,.wangshuai,.nayin{
				display: flex;
				justify-content: space-between;
			padding: 10rpx 0;
			.item{
				width: 20%;
				text-align: center;
			}
			.title{
				font-weight: 550;
			}
			}
			.dz_cg{
				color: #cecece;
			}
			.tg_shishen,.dz_shishen{
				color: #fcb4d9;
			}
			.wangshuai{
				color: #fcb4d9;
			}
			.nayin{
				color: #00b300;
			}
			.bazi{
				.tg_item,.dz_item{
					display: flex;
					justify-content: space-between;
				padding: 10rpx 0;
				align-items: center;
				.item{
					width: 20%;
					text-align: center;
				}
				.title{
					font-weight: 550;
				}
				}
			}
		}
		.boyactive{
			max-height: 1500rpx;
			// background-color: #00b300;
		}
		
	}
	// 折叠
	.isactive{
		padding: 20rpx;
		text-align: center;
		color: #00b300;
		font-size: 24rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom, #fff 60%, #f3f3f3);
		
	}
	.zhedie{
		 
		padding: 6rpx 0;
		text-align: center;
		color: #00b300;
		font-size: 24rpx;
		border: 2rpx solid #f3f3f3;
		border-radius: 20rpx;
	}
	
	// 测算结果
	.hehun{
		// background-color: #fff;
		margin-top: 20rpx;
		padding: 16rpx;
		border-radius: 20rpx;
		.title{
			background-color: #fcb4d9;
			color: #FFF;
			padding: 20rpx 0;
			text-align: center;
			font-size: 42rpx;
			font-weight: 550;
			letter-spacing: 4rpx;
			border-radius: 10rpx 10rpx 0 0;
		}
		.allsore{
			width: 100%;
			padding: 20rpx;
			text-align: center;
			background-color: #fff;
			border-radius:0 0 10rpx 10rpx;
			.sore{
				border:6rpx solid #fcb4d9;
				width: 300rpx;
				display: inline-block;
				padding: 40rpx 0;
				font-size: 42rpx;
				border-radius: 20rpx;
			}
		}
		.minggong,.nianzhi,.yueling,.rigan,.tg_wuhe,.zinv{
			margin-top: 20rpx;
			padding: 10rpx;
			background-color: #fff;
			// border: 2rpx solid #a12d36;
			border-radius: 10rpx;
			.top_title{
				.titleinfo{
					display: flex;
					.line{
						width: 10rpx;
						height: 50rpx;
						background-color: #fcb4d9;
						border-radius: 4rpx;
						margin-right: 10rpx;
					}
					.text{
						font-size: 36rpx;
						color: black;
					}
				}
				display: flex;
				justify-content: space-between;
				padding: 10rpx;
				// background-color: #a12d36;
				// color: #fcb4d9;
				// color: black;
				// border-radius: 10rpx;
				// border-bottom: 4rpx solid #cecece;
				font-size: 42rpx;
				font-weight: 550;
				
			}
			.content{
				padding: 10rpx;
				.description{
					padding: 10rpx 0;
					color: #a7a7a7;
				}
				.detail{
					padding: 10rpx 0;
				}
			}
		}
	}
}
</style>
